<template>
  <div class="statistic">
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label="已完成时间">
        <el-date-picker
          v-model="formData.date"
          type="daterange"
          size="mini"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDefectRate">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="20" style="height: 350px">
      <el-col :span="8" style="height: 100%"><div id="pieChart"></div></el-col>
      <el-col :span="16" style="height: 100%"><div id="barChart"></div></el-col>
    </el-row>
    <el-row :gutter="20" style="height: 350px;margin-top:20px">
      <el-col :span="8" style="height: 100%"
        ><div class="explain">
          统计规则说明：<br> 
          1.消缺率的统计对象为缺陷工单<br>
          2.统计范围：日期范围，默认选中本月一整个月<br>
          3.应处理：状态不等于草稿、已作废、待处理，且应完成处理时间在日期范围之内的工单数量<br>
          4.已处理：状态等于待提交分析报告或已归档，且应完成处理时间在日期范围之内的工单数量<br>
          5.消缺率：已处理/应处理*100%<br>
        </div></el-col>
      <el-col :span="16" style="height: 100%"
        ><div id="lineChart"></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import { getRateOfDefect } from "@/api/orderManagement/defectOrder";
export default {
  data() {
    return {
      formData: {
        date: [],
      },
    };
  },
  mounted() {
    // this.loadPieChart(val.overall);
    // this.loadBarChart(val.organizers);
  },
  created() {
    let startTime = this.$utils.getMonth("s",0);
    let endTime = this.$utils.getMonth("e",0);
    this.formData.date = [startTime, endTime];
    this.getDefectRate();
  },
  methods: {
    //初始化统计图容器
    // init() {
    //   this.loadPieChart();
    //   this.loadBarChart();
    // },
    //获取消缺数据
    async getDefectRate() {
      let params = {
        startTime: this.formData.date[0],
        endTime: this.formData.date[1],
      };
      let res = await getRateOfDefect(params);
      this.loadPieChart(res.data);
      this.loadBarChart(res.data);
      this.loadLineChart(res.data);
    },
    //加载扇形统计图
    loadPieChart(data) {
      let pieChart = this.$echarts.init(document.getElementById("pieChart"));
      let source = [
        { value: data.undoneSum, name: "未处理缺陷数" },
        { value: data.doneSum, name: "已处理缺陷数" },
      ];
      let pieChartOption = {
        color: ["#3AA0FF", "#4ECB73"],
        title: {
          text: "总体进度",
          left: "center",
          top: 15,
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {d}%",
        },
        legend: {
          orient: "horizontal",
          bottom: "5%",
          itemWidth: 10,
          itemHeight: 10,
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"],
            avoidLabelOverlap: true,
            label: {
              formatter: "{b}: {d}%",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "16",
                fontWeight: "bold",
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                formatter: "{d}%",
              },
            },
            data: source,
          },
        ],
      };
      pieChart.setOption(pieChartOption);
    },
    //加载柱状统计图
    loadBarChart(data) {
      let barChart = this.$echarts.init(document.getElementById("barChart"));
      let res = this.handleStatisData(data);
      console.log(res);
      let barChartOption = {
        color: ["#4ECB73", "#3AA0FF"],
        title: {
          text: "各单位缺陷数统计",
          left: "center",
          top: 15,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          orient: "horizontal",
          bottom: "5%",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 15,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: res.xAxisData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "已处理缺陷数",
            type: "bar",
            stack: "deptName",
            label: {
              show: false,
            },
            data: res.sourceData1,
          },
          {
            name: "未处理缺陷数",
            type: "bar",
            stack: "deptName",
            label: {
              show: false,
            },
            data: res.sourceData2,
          },
        ],
      };
      barChart.setOption(barChartOption);
    },
    //加载折线图
    loadLineChart(data) {
      let lineChart = this.$echarts.init(document.getElementById("lineChart"));
      let res = this.handleStatisData(data);
      let lineChartOption = {
        //color: ["#4ECB73","#3AA0FF"],
        title: {
          text: "各单位消缺率统计",
          left: "center",
          top: 15,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
          formatter: '{a}:{c} %'
          
        },
        legend: {
          orient: "horizontal",
          bottom: "5%",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 15,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: res.xAxisData,
        },
        yAxis: {
          type: "value",
          axisLabel:{
            show: true,
            interval:"auto",
            formatter:'{value} %'
          }
        },
        series: [
          {
            name: "缺陷消缺率",
            type: "line",
            stack: "deptName",
            label: {
              show: false,
            },
            data: res.defectRate,
          },
        ],
      };
      lineChart.setOption(lineChartOption);
    },
    //处理统计数据
    handleStatisData(data) {
      let obj = {
        xAxisData: [],
        sourceData1: [],
        sourceData2: [],
        defectRate: [],
      };
      data.defectRateList.forEach((item) => {
        if (item.deptName) {
          obj.xAxisData.push(item.deptName);
          obj.sourceData1.push(item.done);
          let unDone = item.todone - item.done;
          obj.sourceData2.push(unDone);
          let rate = (item.done*100/item.todone).toFixed(2);
          obj.defectRate.push(rate);
        }
      });
      return obj;
    },
  },
};
</script>

<style lang="less" scoped>
.statistic {
  width: 100%;
  .demo-form-inline {
    text-align: left;
  }
  #pieChart {
    width: 100%;
    height: 100%;
    border: 1px solid #d7d7d7;
  }
  #barChart {
    width: 100%;
    height: 100%;
    border: 1px solid #d7d7d7;
  }
  #lineChart {
    width: 100%;
    height: 100%;
    border: 1px solid #d7d7d7;
  }
  .explain{
    width: 100%;
    height: 100%;
    white-space: pre-line;
    text-align:left;
    line-height:30px;
  }
}
</style>
